<template>
  <div class="home_c">
    <div class="home_header">
      <div class="image" @click="repaceHref">
      </div>
      <div class="header_center">
        <search></search>
      </div>
      <div class="header_right">
        <van-button size="mini" plain type="warning">登录</van-button>
      </div>
    </div>

    <!-- 轮播 -->
    <div class="home_tab">
      <van-tabs v-model:active="active">
        <van-tab v-for="(item, index) in kingKongList" :key="index" :title="item.text" title-active-color="red"
          itle-inactive-color="red">
          <van-swipe class="my_swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item class="my_swipe_item" v-for="item in swiperList" :key="item.id">
              <img :src="item.picUrl">
            </van-swipe-item>
          </van-swipe>
          <Home v-if="index == 0"></Home>
          <AtHome v-if="index == 1">123</AtHome>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 回到顶部 -->
    <van-back-top bottom="10vh" />

    <div class="footer" style="height: 200px;"></div>
  </div>
</template>

<script setup lang="ts">
import search from '@/components/search/search.vue'
import { ref, onMounted } from 'vue'
import Home from '@/pages/Home/pages/Home/index.vue'
import AtHome from '@/pages/Home/pages/atHome/index.vue'
import type {
  focusListModel,
  kingKongModuleModel,
  kingKongListModel
} from '@/api/home'
import homeApi from '@/api/home'
const active = ref(0);

// 轮播
const swiperList = ref<focusListModel[]>()
// 标签页
const kingKongModule = ref<kingKongModuleModel>()
// 标签页列表
const kingKongList = ref<kingKongListModel[]>()

// 生命周期
onMounted(() => {
  getHomeData()
})
// 函数
const getHomeData = async () => {
  try {
    let result = await homeApi.getHomeData()
    // 获取轮播数据
    if (result.data.focusList) {
      swiperList.value = result.data.focusList
    }
    // 获取标签页数据
    if (result.data.kingKongModule) {
      kingKongModule.value = result.data.kingKongModule
      kingKongList.value = (kingKongModule.value as kingKongModuleModel).kingKongList
    }
  } catch (error) {
    console.log(error);

  }
}

// 点击图片
const repaceHref = () => {
  location.replace('/home')
}
</script>

<style lang="less" scoped>
.home_c {
  padding: 0 10px;
}

.home_header {
  padding: 0.3rem 0.2rem;
  display: flex;

  .image {
    width: 70px;
    height: 20px;
    background-image: url("@/assets/hd.png");
    background-position: 2px 0px;
    background-size: 2.5rem 2.5rem;
    display: inline-block;
    margin-right: 5px;
  }

  .header_center {
    width: 220px;
    display: inline-block;
    margin-left: 2px;
  }

  .header_right {
    position: relative;
    top: -8px;
    display: inline-block;
    margin-left: 0.2rem;
  }
}

.my_swipe {
  .my_swipe_item {
    img {
      width: 375px;
      height: 185px;
    }
  }
}

// 轮播
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}


.left {
  text-align: left;
}
</style>